<template>
  <div class="execution">
    <basic-container>
      <el-container>
        <el-aside width="200px">
          <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"></avue-tree>
        </el-aside>
        <el-main>
          <avue-crud ref="crud"
                     :page.sync="page"
                     :data="tableData"
                     :permission="permissionList"
                     :table-loading="tableLoading"
                     :option="tableOption"
                     @on-load="getList"
                     @refresh-change="refreshChange"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     @row-update="handleUpdate"
                     @row-save="handleSave"
                     @row-del="rowDel">
            <!-- 可检索 -->
            <template slot="searchType" slot-scope="scope">
              <i v-if="scope.row.searchType === 0" class="el-icon-error" style="font-size:20px;color:#E4393E;"></i>
              <i v-else class="el-icon-success" style="font-size:20px;color: #37AFA1;"></i>
            </template>
            <!-- 值类型 -->
            <template slot="valueType" slot-scope="scope">
              <el-tag v-if="scope.row.valueType === 0" :disable-transitions="true" type="success">单选</el-tag>
              <el-tag v-else :disable-transitions="true" type="danger">多选</el-tag>
            </template>
            <!-- 图标 -->
            <template slot="icon" slot-scope="scope">
              <i :class="scope.row.icon" style="font-size:24px"></i>
            </template>
            <!-- 可选值 -->
            <template slot="valueSelect" slot-scope="scope">
              <el-tooltip v-show="i !== ''" style="margin: 0 0 5px 3px;" v-for="(i,index) in scope.row.valueSelect.split(';')" :key="index" placement="top">
                <div slot="content">
                  <span>{{ i }}<br/></span>
                </div>
                <el-tag :disable-transitions="true" :type="tagType(index)">{{ i }}</el-tag>
              </el-tooltip>
            </template>
            <template slot-scope="scope" slot="valueSelectForm">
              <el-select
                multiple
                filterable
                allow-create
                default-first-option
                @change="valueChange"
                v-model="tableOption.column[5].value">
                <el-option
                  v-if="select !== ''"
                  v-for="select in selectList"
                  :key="select"
                  :label="select"
                  :value="select">
                </el-option>
              </el-select>
            </template>

            <!-- 启用 -->
            <template slot="enable" slot-scope="scope">
              <i v-if="scope.row.enable === 0" class="el-icon-error" style="font-size:20px;color: #E4393E;"></i>
              <i v-else class="el-icon-success" style="font-size:20px;color: #37AFA1;"></i>
            </template>
            <!-- 快速展示 -->
            <template slot="showDesc" slot-scope="scope">
              <i v-if="scope.row.showDesc === 0" class="el-icon-error" style="font-size:20px;color: #E4393E;"></i>
              <i v-else class="el-icon-success" style="font-size:20px;color: #37AFA1;"></i>
            </template>

            <!--操作-->
            <template slot-scope="scope" slot="menu">
              <el-button @click="handleEdit(scope.row, scope.index)" icon="el-icon-edit" :size="scope.size" :type="scope.type">编 辑</el-button>
              <el-button @click="handleDel(scope.row, scope.index)" icon="el-icon-delete" :size="scope.size" :type="scope.type">删 除</el-button>
            </template>
          </avue-crud>
        </el-main>
      </el-container>
    </basic-container>
  </div>
</template>

<script>
import {tableOption, treeOption, typeList} from "@/const/crud/attr";
import {fetchCidTree} from "@/api/category";
import {mapGetters} from "vuex";
import {fetchSaleList, putObj} from "@/api/attr";
import request from "@/router/axios";
import {fetchAttrGroupList} from "@/api/attrgroup";

export default {
  name: "sale",
  data() {
    return {
      attrType: 0,
      treeData: [],
      treeOption: treeOption,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      tableData: [],
      tableOption: tableOption,
      spuId: 0,
      catId: 0,
      searchForm: {},
      typeList: typeList,
      selectedValue: '',
      selectList: []
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.product_sale_attr_add, false),
        delBtn: this.vaildData(this.permissions.product_sale_attr_del, false),
        editBtn: this.vaildData(this.permissions.product_sale_attr_edit, false)
      };
    },
    tagType() {
      return function (index) {
        return this.typeList[index % this.typeList.length];
      }
    }
  },
  created() {
    fetchCidTree(3).then(res => {
      this.treeData = res.data.data;
      this.tableOption.column[8].dicData = res.data.data;
    });
    fetchAttrGroupList(0, {current: 1, size: 100}).then(response => {
      const list = [];
      response.data.data.list.forEach(item => {
        list.push({label: item.attrGroupName, value: item.attrGroupId});
      });
      console.log(list);
      this.tableOption.column[10].dicData = list;
    });
  },
  methods: {
    getList(page) {
      this.tableLoading = true;
      let type = this.attrType === 0 ? "sale" : "base";
      const catId = this.catId;
      fetchSaleList(type, catId, Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, this.searchForm)).then(response => {
        this.tableData = response.data.data.list;
        this.page.total = response.data.data.totalCount
        if (response.data.data.totalCount === 0) {
          this.$message.warning('当前分类下无数据！');
        }
      }).catch(error => {
        this.$message.error(error);
        this.tableData = [];
        this.page.total = 0;
      }).finally(() => {
        this.tableLoading = false
      });
    },
    nodeClick(data) {
      if (data.level === 3) {
        this.spuId = data.value;
        this.getList(this.page);
      }
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.catId = 0;
      this.getList(this.page)
    },
    handleUpdate: function (row, index, done, loading) {
      row.valueSelect = this.selectedValue;
      putObj(row).then(data => {
        this.$message.success('修改成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    handleSave(row, done, loading) {
      return request({
        url: '/product/attrgroup',
        method: 'post',
        data: row
      }).then(data => {
        this.$message.success('添加成功')
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除【' + row.attrGroupName + '】', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.attrGroupId)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    handleEdit(row, index) {
      this.selectedValue = '';
      this.selectList = [];

      const valueList = [];
      row.valueSelect.split(';').forEach(item => {
        if (item !== ''){
          valueList.push(item);
        }
      });
      this.selectList = valueList;
      this.$refs.crud.resultOption.column[5].value = valueList;
      this.$refs.crud.resultOption.column[5].dicData = valueList;
      this.$refs.crud.rowEdit(row, index);
    },
    handleDel(row, index) {
      this.$refs.crud.rowDel(row, index);
    },
    valueChange(value) {
      this.selectedValue = "";
      value.forEach(item => {
        this.selectedValue = this.selectedValue + (item + ";");
      })
      console.log(this.selectedValue);
    }
  }
}
</script>

<style scoped>

</style>
